<template>
	<div class="app-container">
		<h2>4.2.5&nbsp;建筑的回收再利用率</h2>
		<el-card v-for="(item,index) in items" :key="item.id" class="evaluation-item" shadow="hover">
			<div slot="header" class="clearfix">
				<span class="number">{{ item.id }}.&nbsp;{{ item.title }}</span>
				<div class="options">
					<evaluationStd :_aspect="item.title" :_evaluatioon_index="item.evaluation_index" class="evaluation" />

					<lock :_locked="score[index].locked" :-pop-over-show="false" class="lock" @click.native="handleLock(index)" />
				</div>
			</div>
			<el-card class="children-question" shadow="never">
				<div slot="header" class="children-header">
					<div>{{ item.aspect }}.（{{ item.max_score }}分）</div>
				</div>
				<el-form ref="form" :model="item" label-width="100px">
					<el-form-item v-if="item.id==1">
					  <el-radio-group v-model="score[index].score">
					    <el-radio :label="2" :disabled="score[index].locked">30%≤R(rp)<50%</el-radio>
					    <el-radio :label="3" :disabled="score[index].locked">50%≤R(rp)<80%</el-radio>
						<el-radio :label="4" :disabled="score[index].locked">R(rp)≥80%</el-radio>
					  </el-radio-group>
					</el-form-item>
					<el-form-item v-else-if="item.id==2" >
					  <el-radio-group v-model="score[index].score">
					    <el-radio :label="2" :disabled="score[index].locked">60%≤R(lm)<70%</el-radio>
					    <el-radio :label="3" :disabled="score[index].locked">70%≤R(lm)<90%</el-radio>
						<el-radio :label="4" :disabled="score[index].locked">R(lm)≥90%</el-radio>
					  </el-radio-group>
					</el-form-item>
					<el-form-item v-else-if="item.id==3" >
					  <el-radio-group v-model="score[index].score">
						  <el-radio-group v-model="score[index].score">
						    <el-radio :label="2" :disabled="score[index].locked">达到50%</el-radio>
						    <el-radio :label="3" :disabled="score[index].locked">达到100%</el-radio>
						  </el-radio-group>
					  </el-radio-group>
					</el-form-item>
					<el-form-item v-else-if="item.id==4" >
					  <el-radio-group v-model="score[index].score">
					    <el-radio :label="2" :disabled="score[index].locked">钢结构：Q345及以上高强钢材用量占钢材总量的比例达到50%</el-radio>
					    <el-radio :label="3" :disabled="score[index].locked">钢结构：Q345及以上高强钢材用量占钢材总量的比例达到70%</el-radio>
					  </el-radio-group>
					</el-form-item>
					<el-form-item v-else-if="item.id==5" label="是否满足" >
					  	<el-radio-group v-model="score[index].satisfy">
					  	  <el-radio
					  	    :label="true"
					  	    :disabled="score[index].locked"
					  	    @change="addScore(index, true)"
					  	  >是</el-radio>
					  	  <el-radio
					  	    :label="false"
					  	    :disabled="score[index].locked"
					  	    @change="addScore(index,false)"
					  	  >否</el-radio>
					  	</el-radio-group>
					</el-form-item>
					<el-form-item v-else-if="item.id==6">
					  <el-radio-group v-model="score[index].score_index">
					    <el-radio :label="0" :disabled="score[index].locked">住宅建筑中的可再利用材料和可再循环材料用量比例达到65%</el-radio>
					    <el-radio :label="1" :disabled="score[index].locked">住宅建筑中的可再利用材料和可再循环材料用量比例达到10%</el-radio>
						<el-radio :label="2" :disabled="score[index].locked">公共建筑中的可再利用材料和可再循环材料用量比例达到65%</el-radio>
						<el-radio :label="3" :disabled="score[index].locked">公共建筑中的可再利用材料和可再循环材料用量比例达到15%</el-radio>
					  </el-radio-group>
					</el-form-item>
					<el-form-item v-if="!score[index].satisfy&&item.id==5" label="不满足简述">
						<el-input v-model="score[index].description" label="不满足简述" type="textarea" />
					</el-form-item>
				</el-form>
			</el-card>
			<!-- <div class="socre">
        <div class="score-title">得分&nbsp;&nbsp;</div>
        <div class="sum-score">{{item.score}}&nbsp;分</div>
      </div>-->
		</el-card>
		<div id="choose">
			<router-link to="/usage/evaluate/material-select">
			  <el-button type="primary" icon="el-icon-arrow-left">上一项</el-button>
			</router-link>
			
			<router-link to="/addition/first">
			  <el-button type="primary" style="margin-left:20px">
			    下一项
			    <i class="el-icon-arrow-right el-icon--right"></i>
			  </el-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import Lock from "@/components/Lock";
	import EvaluationStd from "@/components/EvaluationStd";

	export default {
		name: "Aircondition",
		components: {
			Lock,
			EvaluationStd
		},
		data() {
			return {
				items: [{
						id: 1,
						title: "可变换功能的室内空间",
						aspect:
							"公共建筑中可变换功能的室内空间采用可重复使用的隔断（墙）比例",
						max_score: 4,
						evaluation_index: "",
					},
					{
						id: 2,
						title: "选用本地生产的建筑材料",
						aspect: "施工现场500km以内生产的建筑材料重量占建筑材料总重量的比例",
						max_score: 4,
						evaluation_index: "",
					},
					{
						id: 3,
						title: "建筑砂浆采用预拌砂浆",
						aspect: "建筑砂浆采用预拌砂浆的比例",
						max_score: 3,
						evaluation_index: "",
					},
					{
						id: 4,
						title: "合理采用高强建筑结构材料",
						aspect: "钢结构：Q345及以上高强钢材用量占钢材总量的比例",
						max_score: 3,
						evaluation_index: "",
					},
					{
						id: 5,
						title: "合理采用高强建筑结构材料",
						aspect: "合理采用高耐久性建筑结构材料，对钢结构，采用耐候结构钢或耐候型防腐涂料。",
						max_score: 1,
						evaluation_index: "",
					},
					{
						id: 6,
						title: "采用可再利用材料和可再循环材料",
						aspect: "采用可再利用材料和可再循环材料的比例",
						max_score: 5,
						evaluation_index: "",
					}],
				score: []
			}
		},
		computed: {
			...mapGetters({
				usageScore: "usage",
				eId: "eId"
			})
		},
		created() {
			console.log("usageScore",this.usageScore)
			this.$store.dispatch("project/getHistory", this.eId);
			this.score = this.usageScore._4_2_5;
			if (this.score.length === 0) {
				console.log("我等于-0")
				this.score = [{
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0,
								score_index:-1
							  }]
			}
		},
		beforeDestroy() {
			let score_array = [3,5,3,5]
			this.score[5].score = score_array[this.score[5].score_index]
			this.$store.dispatch("project/updateScore", {
				score: this.score,
				phase: "usage",
				aspect: "_4_2_5"
			});
		},
		methods: {
			// 计算分数的时候，第一项可能要先获取项目资料

			handleLock(index) {
				this.score[index].locked = !this.score[index].locked;
			},
			addScore(index, whether) {
				if (whether) {
					this.score[index].score = this.items[index].max_score;
				} else {
					this.score[index].score = 0;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		h2 {
			text-align: center;
		}

		#choose {
			text-align: center;
			margin: 20px auto;
		}

		.evaluation-item {
			width: 60%;
			margin: 10px auto;

			>>>.el-card__header {
				padding: 10px 20px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				overflow: hidden;
				position: relative;

				.number {
					font-weight: bold;
					position: absolute;
					bottom: 0;
				}

				.options {
					float: right;
					bottom: 0;

					.lock,
					.evaluation {
						display: inline-block;
					}
				}
			}

			.children-question {
				width: 100%;
				border: none;

				>>>.el-card__header {
					border-bottom: 0px;
					padding: 0px 20px;
				}

				>>>.el-card__body {
					padding: 10px 20px;
				}
			}
		}
	}
</style>
